<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { TChannelItem, TResponse } from '../types'
import useToutiaoStore from '../store';
import { storeToRefs } from 'pinia';

const toutiaoStore = useToutiaoStore()

const { channelId } = storeToRefs(toutiaoStore)
const { updateChannelId } = toutiaoStore

const channelList = ref<TChannelItem[]>([])
const getList = async () => {
  const r = await axios.get<TResponse<{ channels: TChannelItem[] }>>('http://geek.itheima.net/v1_0/channels')
  const channels = r.data.data.channels
  // !#2 指定初始高亮的 ID
  updateChannelId(channels[0].id)
  channelList.value = channels
}
getList()

</script>

<template>
  <ul class="catagtory">
    <!-- //!#3 -->
    <li @click="updateChannelId(item.id)" :class="{
      select: channelId === item.id
    }" v-for="item in channelList" :key="item.id">{{item.name}}</li>
  </ul>
</template>

<style scoed lang="less"></style>
